
<template>
    <div class="home-nav">
        <div>
            <img src="@/assets/logo.png"  style="width: 80px;height: 55px;">
        </div>
        <div class="home-title">星晖启航线上平台</div>
        <div class="home-bar">
            <div class="home-bar-element" @click="Router.homePage"
                :style="{ 'color': Router.home ? '#bfdbfe' : 'black' }">首页</div>
            <div class="home-bar-element" @click="Router.purchasePage"
                :style="{ 'color': Router.purchase ? '#bfdbfe' : 'black' }">商城</div>
                <div class="home-bar-element"  @click="Router.dataPage"
                :style="{ 'color': Router.data ? '#bfdbfe' : 'black' }" >个人中心</div>
            <div class="home-bar-element" @click="Router.uploadPage"
                :style="{ 'color': Router.upload ? '#bfdbfe' : 'black' }">上传课程</div>
            <div class="home-bar-element" @click="Router.openLogin">登录</div>
            <div class="home-bar-element" @click="Router.openSign">注册</div>
        </div>
    </div>
 
    
    <div v-if="Router.showSign === true" class="popup">
        <div class="popup-content">
            <div @click="Router.closeSign" style="margin-left: 95%;background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>

 
  <div v-if="Router.showLogin === true" class="popup">
        <div class="popup-content">
            <div @click="Router.closeLogin" style="margin-left: 95%;background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>

    <div class="body">
        <div class="buyNav">
            <h2 style="margin-top: 30px;margin-left: 100px;">商城</h2>
            <div style="position: absolute;margin-top: 40px;margin-left: 60%;">
                <input placeholder="搜索内容" class="search-input">
            </div>
        </div>
        <div class="buy-course-nav">
            <div  @click="allth" :style="{ 'color': all ? '#ff8642' : 'black' }" 
            class="buy-course-click" >全部</div>
            <div  @click.="codeth":style="{ 'color': code ? '#ff8642' : 'black' }"
            class="buy-course-click"  >编程</div>
            <div style="margin-left: 40px;" @click="machineth"
            :style="{ 'color': machine ? '#ff8642' : 'black' }"  >机器人</div>
            <div style="margin-left: 40px;" @click="techlogyth"
            :style="{ 'color': techlogy ? '#ff8642' : 'black' }"  >智能学习</div>
        </div>
        <div class="buy-contain">
            <div  >
                <div class="contain-div" @click="router.push('/study')">
                    <img src="@/assets/课程购买封面.png" style="width: 100%;height: 180px;">
                    <div class="course-name">{{ information.name }}</div>
                    <div class="course-introduction">{{ information.stutes }}</div>
                    <div class="course-introduction">{{ information.author }}</div>
                    <div class="join-div">正在进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
            </div>
            <div  >
                <div class="contain-div" @click="router.push('/study')">
                    <img src="@/assets/课程购买封面.png" style="width: 100%;height: 180px;">
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">作者 </div>
                    <div class="join-div">正在进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="contain-div" @click="router.push('/study')">
                    <img src="@/assets/课程购买封面.png" style="width: 100%;height: 180px;">
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">进阶</div>
                    <div class="course-introduction">作者 </div>
                    <div class="join-div">正在进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
            </div>
            <div class="column" >
                <div class="contain-div"@click="router.push('/study')" >
                    <img src="@/assets/课程购买封面.png" style="width: 100%;height: 180px;">
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">作者 </div>
                    <div class="join-div">正在进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
            </div>
            
            <div class="column" >
                <div class="contain-div" @click="router.push('/study')">
                    <img src="@/assets/课程购买封面.png" style="width: 100%;height: 180px;">
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">作者 </div>
                    <div class="join-div">正在进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
            </div>
            <div class="column" >
                <div class="contain-div"  @click="router.push('/study')">
                    <img src="@/assets/课程购买封面.png" style="width: 100%;height: 180px;">
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">进阶</div>
                    <div class="course-introduction">作者 </div>
                    <div class="join-div">正在进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
            </div>
            <div class="column" >
                <div class="contain-div" @click="router.push('/study')" >
                    <img src="@/assets/课程购买封面.png" style="width: 100%;height: 180px;">
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">基础</div>
                    <div class="course-introduction">作者 </div>
                    <div class="join-div">正在进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
            </div>
            <div class="column" >
                <div class="contain-div" @click="router.push('/study')">
                    <img src="@/assets/课程购买封面.png" style="width: 100%;height: 180px;">
                    <div class="course-name">智能小车</div>
                    <div class="course-introduction">进阶</div>
                    <div class="course-introduction">作者 </div>
                    <div class="join-div">正在进行
                        <div style="margin-left: 40px;">2512人参与</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</template>
<script setup>
import router from '@/router/index';
import { RouterData } from '../home/home';
import {buyData}from './buy';
const { Router } = RouterData();
import { messageData } from '../upload/upload';
const { information } = messageData();
const {all,code,machine,techlogy,
allth,codeth,machineth,techlogyth}=buyData();
</script>
<style scoped>
@import '../buy/buy.scss'
</style>